<script setup>
import { onMounted, ref } from "vue";
import LoginDialog from "./LoginDialog.vue";
const active = ref(0);


onMounted(() => {});
</script>
<template>
  <div class="home">
    <div class="content"><router-view ></router-view></div>
    <van-tabbar v-model="active" route >
      <van-tabbar-item to="/main/chat">
        <span>首页</span>
        <template #icon="props">
          <img v-if="!props.active" src="../../assets/mobile/home.png" />
          <img v-else src="../../assets/mobile/home_check.png" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/main/painting">
        <span>绘画</span>
        <template #icon="props">
          <img v-if="!props.active" src="../../assets/mobile/AI绘画.png" />
          <img v-else src="../../assets/mobile/AI绘画选中.png" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/main/creative">
        <span>创意字</span>
        <template #icon="props">
          <img v-if="!props.active" src="../../assets/mobile/创意字.png" />
          <img v-else src="../../assets/mobile/创意字选中.png" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/main/owner">
        <span>我的</span>
        <template #icon="props">
          <img v-if="!props.active" src="../../assets/mobile/owner.png" />
          <img v-else src="../../assets/mobile/owner_check.png" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
    <LoginDialog />
  </div>
</template>

<style lang="less" scoped>
.home {
  display: flex;
  flex-direction: column;
  height: 93%;
}
.content {
  flex: 1; /* 占据剩余空间 */
  overflow-y: auto; /* 如果内容过多，允许滚动 */
}
.van-tabbar {
  flex-shrink: 0; /* 防止 tabbar 缩小 */
  height: 7%;
}
</style>
